<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Go-Knowledge AI</title>
    <meta name="viewport"
          content="width=device-width,height=device-height, user-scalable=no,initial-scale=1, minimum-scale=1, maximum-scale=1,target-densitydpi=device-dpi ">
    <link href="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/daisyui/2.2.2/full.min.css" rel="stylesheet" type="text/css"/>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        body{
            height: 100%;
            background: linear-gradient(to bottom right,#dbe6fb, #f3f4f8);
            background-size: cover;
            background-attachment: fixed;
        }
        h1{
            font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';
        }
    </style>
    <script src="https://unpkg.com/typed.js@2.0.15/dist/typed.umd.js"></script>
</head>
<body>
<div class="container">
    <div class="flex flex-col items-center h-screen w-screen">
        <div class="flex flex-col items-center justify-center" style="padding: 10px;margin: 60px 0px 48px;color: #262626;">
            <h1 style="font-weight: 600;font-size: 46px;text-align: center;margin: 0px 0px 12px;">Go-Knowledge AI</h1>
            <p  style="font-size: 30px;"><span  id="subTitle"></span></p>
        </div>
        <div class="flex flex-col justify-start mt-10 mx-5">
            <div class="card bg-base-100 shadow-md">
                <div class="card-body">
                    <h2 class="card-title">AI 回答</h2>
                    <p class="text-lg" id="answer"></p>
                    <div class="card-actions justify-start" id="tags">
                    </div>
                </div>
            </div>
        </div>
        <div class="flex flex-row items-center justify-center w-full">
            <input id="search" type="text" placeholder="请输入查询内容"
                   class="input input-bordered w-2/3 lg:w-2/5 mr-2"/>
            <button style="display: none" id="qdrant" class="btn btn-primary mr-1">Qdrant回答</button>
            <button id="gpt" style="background:linear-gradient(90deg, #2870EA 10.79%, #1B4AEF 87.08%);" class="btn btn-primary">立即提问</button>
        </div>

    </div>
</div>
<script>
    var typed = new Typed('#subTitle', {
        strings: ['我是知识库机器人，一个专门响应人类指令的大模型','我服务于人类，致力于让生活更美好','自建私有数据知识库 · 与知识库AI聊天'],
        cursorChar: '_',
        loop: true,
        typeSpeed: 120,
        backDelay: 3000,
    });

    //集合名称
    const collectName="{{.collectName}}";
    const search = document.querySelector('#search');
    const card = document.querySelector('.card');
    card.style.display = 'none';
    document.querySelector('#qdrant').addEventListener('click', () => {
        fetch("/"+collectName+'/search?keywords='+search.value+"&searchType=1", {
            method: 'GET',
        }).then(res => res.text()).then(data => {
            card.style.display = 'block';
            document.querySelector('#answer').innerHTML = data;
        });
    });
    document.querySelector('#gpt').addEventListener('click', () => {
        if(search.value=="") return;
        var xhr = new XMLHttpRequest();
        xhr.open("GET", "/"+collectName+'/searchStream?keywords='+search.value);
        xhr.setRequestHeader("Content-Type", "text/html");
        xhr.onprogress = function(event) {
            // console.log(event.currentTarget.responseText);
            card.style.display = 'block';
            document.querySelector('#answer').innerHTML = event.currentTarget.responseText;
        };
        xhr.send();

        // fetch("/"+collectName+'/search?keywords='+search.value+"&searchType=2", {
        //     method: 'GET',
        // }).then(res => res.text()).then(data => {
        //     card.style.display = 'block';
        //     document.querySelector('#answer').innerHTML = data;
        // });
    });

</script>
</body>
</html>